<template id="head">
    <div>
        <div id="nav">
            <div  v-for="(li,p) in list" class="class_a">
              <router-link :to="li.url" v-bind:class="isActive[p]" v-on:click.native="switchNowTime(p)">{{li.name}}</router-link>
            </div>
        </div>
    </div>

</template>
<script>
    /*<!--v-bind:style="styleHead"-->*/
    export default{
        name: 'head',
        data(){
            return{
                styleHead:{
                    color:'red',
                },
                list:[],
				isActive:new Array(5),
                now_time:'',
            }
        },
        mounted:function(){alert(33333);
			var url = this.$route.fullPath;
			let that=this;
            /*nav导航*/
            this.$ajax.post(this.GLOBAL.BaseUrl+'/mobile/api/v1/Index.php?mode=menu').then((res) => {
                    let temp = res.data;
					if(temp.code == 200){
                        that.list = temp.data;
                        that.isActive= new Array(that.list.length);
						  for(var i in that.list){
							if(that.list[i]['url'] == url){
                                that.$set(that.isActive,i,'selected');
							}
						  }
					}
                });
        },
        methods:{
            switchNowTime:function(val){
                this.isActive=new Array(5);
				this.$set(this.isActive,val,'selected');
			 }
        }
    }
</script>
<style>
   #nav .class_a .selected{
        color:#95c84e;
        border-bottom:2px solid #95c84e
    }
   /* .navClass{
        color:#95c84e;
        border-bottom:1px solid #95c84e
    }*/
    #nav a{
        text-decoration: none;
        display:inline-block;
        color:#333;
        height:0.6rem;
        margin:0 0.13rem;
    }
    #nav{
        font-size:0.26rem;
        height: 0.65rem;
        line-height:0.65rem;
        width:100%;
        text-align:center;
        display: flex;
     /* box-shadow: 0.1rem 0.2rem 0.2rem red;*/
    }
    #nav div{flex-grow: 1;}
</style>
